<template>
  <div class="api-test">
    <h3>API反向代理测试</h3>
    <div class="test-info">
      <p><strong>当前环境:</strong> {{ isDev ? '开发环境' : '生产环境' }}</p>
      <p><strong>API地址:</strong> {{ apiUrl }}</p>
      <p><strong>代理状态:</strong> {{ proxyStatus }}</p>
    </div>
    
    <div class="test-controls">
      <button @click="testConnection" :disabled="testing" class="test-btn">
        {{ testing ? '测试中...' : '测试连接' }}
      </button>
      <button @click="testIndicatorAPI" :disabled="testing" class="test-btn">
        {{ testing ? '测试中...' : '测试指标API' }}
      </button>
    </div>
    
    <div v-if="testResult" class="test-result" :class="testResult.success ? 'success' : 'error'">
      <h4>{{ testResult.success ? '✅ 测试成功' : '❌ 测试失败' }}</h4>
      <pre>{{ JSON.stringify(testResult.data, null, 2) }}</pre>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useIndicatorAPI } from '../composables/useIndicatorAPI.js'
import API_CONFIG from '../config/api.js'

const testing = ref(false)
const testResult = ref(null)
const { getIndicatorData } = useIndicatorAPI()

// 计算属性
const isDev = computed(() => import.meta.env.DEV)
const apiUrl = computed(() => API_CONFIG.getApiUrl(API_CONFIG.ENDPOINTS.JDBC_MANAGER))
const proxyStatus = computed(() => isDev.value ? '启用代理' : '直连')

// 测试基本连接
const testConnection = async () => {
  testing.value = true
  testResult.value = null
  
  try {
    console.log('测试连接到:', apiUrl.value)
    
    const response = await fetch(apiUrl.value, {
      method: 'POST',
      headers: API_CONFIG.HEADERS,
      body: new URLSearchParams({
        action: 'test',
        t: Date.now().toString()
      })
    })
    
    console.log('响应状态:', response.status, response.statusText)
    
    let responseText = ''
    let responseData = null
    
    try {
      responseText = await response.text()
      console.log('响应内容:', responseText.substring(0, 200) + '...')
      
      // 尝试解析为JSON
      if (responseText.trim().startsWith('{') || responseText.trim().startsWith('[')) {
        responseData = JSON.parse(responseText)
      } else {
        responseData = { rawResponse: responseText }
      }
    } catch (parseError) {
      responseData = { 
        rawResponse: responseText,
        parseError: parseError.message 
      }
    }
    
    testResult.value = {
      success: response.ok,
      data: {
        status: response.status,
        statusText: response.statusText,
        headers: Object.fromEntries(response.headers.entries()),
        url: response.url,
        responseType: response.headers.get('content-type'),
        responseData: responseData
      }
    }
  } catch (error) {
    console.error('连接测试失败:', error)
    testResult.value = {
      success: false,
      data: {
        error: error.message,
        stack: error.stack,
        type: error.constructor.name
      }
    }
  } finally {
    testing.value = false
  }
}

// 测试指标API
const testIndicatorAPI = async () => {
  testing.value = true
  testResult.value = null
  
  try {
    const result = await getIndicatorData('按揭贷款不良余额')
    testResult.value = {
      success: true,
      data: result
    }
  } catch (error) {
    testResult.value = {
      success: false,
      data: {
        error: error.message,
        stack: error.stack
      }
    }
  } finally {
    testing.value = false
  }
}
</script>

<style scoped>
.api-test {
  background: rgba(255, 255, 255, 0.1);
  padding: 20px;
  border-radius: 8px;
  margin: 20px;
  color: white;
}

.test-info {
  margin-bottom: 20px;
  padding: 15px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 5px;
}

.test-info p {
  margin: 8px 0;
  font-size: 14px;
}

.test-controls {
  margin-bottom: 20px;
}

.test-btn {
  background: #29D9D5;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  margin-right: 10px;
  font-size: 14px;
}

.test-btn:hover:not(:disabled) {
  background: #1fb8b4;
}

.test-btn:disabled {
  background: #666;
  cursor: not-allowed;
}

.test-result {
  padding: 15px;
  border-radius: 5px;
  margin-top: 15px;
}

.test-result.success {
  background: rgba(20, 225, 68, 0.2);
  border: 1px solid #14e144;
}

.test-result.error {
  background: rgba(255, 99, 22, 0.2);
  border: 1px solid #ff6316;
}

.test-result h4 {
  margin: 0 0 10px 0;
  font-size: 16px;
}

.test-result pre {
  background: rgba(0, 0, 0, 0.5);
  padding: 10px;
  border-radius: 3px;
  font-size: 12px;
  overflow-x: auto;
  white-space: pre-wrap;
  word-wrap: break-word;
}
</style>
